import React from 'react'
import Taro from '@tarojs/taro'
import { View , Text} from '@tarojs/components'
import { AtDivider, AtAvatar, AtButton, AtIcon } from "taro-ui"

import './SingleOrder.scss';

class NoFinishOrder extends React.Component{

  openMap = () => {
    let plugin = requirePlugin('routePlan')
    let key = 'EY7BZ-TLS6X-4SN4L-Z7UAG-YA4CK-WGBQF'  //使用在腾讯位置服务申请的key
    let referer = '马上就挂'   //调用插件的app的名称
    let endPoint = JSON.stringify({  //终点
        'name': this.props.hospital_name,
        'latitude': this.props.latitude,
        'longitude': this.props.longitude
    })
    Taro.navigateTo({
        url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
    })
  }

  render(){
      return(
        <View className='singleOrder'>
          <AtDivider lineColor='#ddd' height='35' />
          <view className='hospital'>
            <Text>{this.props.hospital_name}</Text>
          </view>
          <AtDivider lineColor='#f6f6f6' height='35' />
          <view className='orderInfo'>
            <view className='doctorAvatar'>
              <AtAvatar circle Text='头像' image={this.props.doctor_avatar}></AtAvatar>
            </view>
            <view className='orderBasicInfo'>
              <view className='department'>
                <text className='departmentText'>科室：</text>
                {this.props.department}
              </view>
              <view className='doctor'>
                <text className='doctorText'>预约医师：</text>
                {this.props.doctor_name}
              </view>
              <view className='orderTime'>
                <text className='orderText'>订单时间：</text>
                {this.props.order_time}
              </view>
              <view className='startTime'>
                <text className='startText'>预约时间：</text>
                {this.props.start_time}
              </view>
            </view>
            <view className='orderFee'>
              <text>{this.props.order_fee}元</text>
            </view>
            <AtButton size='small' className='navBtn' onClick={this.openMap}>
                  导航
                  <AtIcon value='map-pin' size='18' color='#999'></AtIcon>
            </AtButton>
          </view>
          {/* <AtDivider lineColor='#ddd' height='35' /> */}
        </View>
      )
    }
}
  
export {NoFinishOrder}